<template>
   <div class="author-set-basic-setup">
      <div class="header-title">
         <div class="title-name">基本设置</div>
         <div class="title-content">
            <button>保存设置</button>
         </div>
      </div>
      <div class="content">
         <ul>
            <li class="lv">
               <div class="title">等级</div>
               <div class="form">
                  <div class="lv-content">
                     <div class="lv-last">
                        Lv.1
                     </div>
                     <div class="progress">
                        <div></div>
                     </div>
                     <div class="lv-next">
                        200/2000
                     </div>
                  </div>
               </div>
            </li>
            <li>
               <div class="title">UID</div>
               <div class="form">
                  <input type="text" v-model="AuthorInfo.uid" placeholder="UID" disabled>
                  <!-- <span>修改</span> -->
               </div>
            </li>
            <li>
               <div class="title">账号</div>
               <div class="form">
                  <input type="text" style="cursor:not-allowed;" disabled v-model="AuthorInfo.useraccount"
                     placeholder="账号">
               </div>
            </li>
            <li>
               <div class="title">昵称</div>
               <div class="form">
                  <input type="text" v-model="AuthorInfo.username" placeholder="昵称" disabled>
                  <span>修改</span>
               </div>
            </li>
            <li>
               <div class="title">性别</div>
               <div class="form">
                  <input type="text" v-model="AuthorInfo.usersex" placeholder="性别" disabled>
                  <!-- <span>修改</span> -->
               </div>
            </li>
            <li>
               <div class="title">经验</div>
               <div class="form">
                  <input type="text" v-model="AuthorInfo.userlevelexp" placeholder="经验值" disabled>
               </div>
            </li>
            <li>
               <div class="title">个性签名</div>
               <div class="form">
                  <textarea minlength="3" placeholder="介绍一下自己嘛"></textarea>
               </div>
            </li>
            <li class="save">
               <button>保存设置</button>
            </li>
         </ul>
      </div>
   </div>
</template>
<script lang="ts" setup >
const props = defineProps({
   // 用户信息
   AuthorInfo: {
      type: Object as any,
   },
   // 用户配置
   AuthorConfig: {
      type: Object as any,
   },
   // 是否是自己
   ismy: {
      type: Boolean
   }
})
</script>
<style lang="scss" scoped>
input {
   width: 100%;
   height: 45px;
   border: 0;
   font-size: 16px;
   background-color: #FFF;
   border-radius: 4px;
   caret-color: var(--aoir-color-primary-2);
   padding: 0 10px;
   border-radius: var(--aoir-border-radius);
   box-shadow: 0 0 35px 0 rgb(108 108 108 / 10%);

   &::placeholder {
      color: #CCD0DB;
   }
}

button {
   background: #ff5245;
   border: 0;
   box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.1);
   color: #fdfdfd;
   cursor: pointer;
   display: flex;
   align-items: center;
   font-size: 14px;
   font-weight: 600;
   height: 35px;
   justify-content: center;
   margin-right: 15px;
   padding: 0 15px;
   transition: all 0.2s;
   border-radius: 8px;

   &:hover {
      opacity: .8;
   }
}

.author-set-basic-setup {
   .header-title {
      width: 100%;
      height: 48px;
      font-size: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid rgba(238, 238, 238, 0.5058823529);
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
   }

   .content {
      width: 100%;


      ul {
         width: 100%;

         li {
            width: 100%;
            display: flex;
            align-items: flex-start;
            margin-bottom: 18px;

            .title {
               width: 100px;
               margin-top: 13px;
               margin-right: 20px;
               display: flex;
               justify-content: center;
               // justify-content: flex-end;
               color: #555;
            }

            .form {
               input {
                  width: 250px;
                  margin-right: 15px;
               }

               textarea {
                  border: 0;
                  width: 480px;
                  height: 110px;
                  resize: none;
                  font-size: 16px;
                  line-height: 26px;
                  caret-color: var(--aoir-color-primary-2);
                  padding: 5px 10px;
                  overflow: hidden;
                  // overflow-wrap: break-word;
                  border-radius: var(--aoir-border-radius);
                  box-shadow: 0 0 35px 0 rgb(108 108 108 / 10%);

                  &::placeholder {
                     color: #CCD0DB;
                     font-size: 16px;
                  }
               }

               span {
                  cursor: pointer;
                  color: #ff9800;
               }
            }
         }

         .lv {
            margin-bottom: 30px;

            .title {
               margin-top: 0px;
            }

            .lv-content {
               display: flex;
               align-items: center;

               .lv-last {
                  padding: 4px 9px;
                  border-radius: 6px;
                  background-color: #ffeb3b;
                  font-size: 13px;
                  font-weight: 900;
               }

               .progress {
                  width: 240px;
                  height: 15px;
                  background-color: #f5f5f5;
                  border-radius: 500px;
                  margin: 0 20px;
                  position: relative;

                  div {
                     position: absolute;
                     left: 0;
                     width: 10%;
                     height: 100%;
                     background-color: #4caf8d;
                     border-radius: 20px;
                  }
               }

               .lv-next {
                  // padding: 4px 9px;
                  // border-radius: 6px;
                  // background-color: #fff0b2;
                  font-size: 14px;
                  color: #aeaeae;
                  // font-weight: 900;
               }
            }
         }

         .save {
            margin-top: 50px;
            width: 100%;
            display: flex;

            // justify-content: center;
            button {
               width: 600px;
               height: 45px;
            }
         }
      }
   }
}
</style>